<template>
    <div class="box">
        <div class="topBox">
            <img class="bgPic" src="/mybg.jpg" alt="">
            <div class="headBox">
                <img class="headPic" :src="userinfo.icon" alt="">
                <p class="headBoxP1">{{ userinfo.name }}</p>
                <p class="headBoxP2">&gt;</p>
            </div>
            <div class="headText">
                <p class="headText1">我的课程</p>
                <p class="headText2">缓存视频</p>
            </div>
        </div>
        <div class="content">
            <div class="content1">
                <img class="contentPic" src="/6.jpg" alt="">
                <div class="content1Box">
                    <p class="content1Pic">数据同步</p>
                    <p class="content2Pic">点击立即同步，上传记录</p>
                </div>
                <p class="content3Pic">立即同步</p>
            </div>
            <div class="content2">
                <StatBox :label="`坚持天数`" :value="userinfo.days + '天'"/>
                <StatBox :label="`学习章节`" :value="userinfo.chapter + '章'"/>
                <StatBox :label="`练习正确率`" :value="userinfo.Accuracy + '%'" />
            </div>
            <div class="content3">
                <div v-for="item in fun" :key="item.id" class="content3Box">
                    <router-link to="/main" class="kaitong">
                        <img :src="item.icon" alt="" class="pic3">
                        <p class="text3">{{ item.name }}</p>
                    </router-link>
                </div>
                <div v-for="item in fun1" :key="item.id" class="content3Box">
                    <img :src="item.icon" alt="" class="pic3">
                    <p class="text3">{{ item.name }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import '../../public/flexible.js'
import { inject, ref, onMounted } from 'vue';
import axios from '../utils/http.js';
import StatBox from './StatBox.vue'; // 新增引用的StatBox组件
const $axios = inject('$axios');
const userinfo = ref({})
const fun = ref([])
const fun1 = ref([])

onMounted(() => {
    $axios.get('../public/data.json').then(res => {
        userinfo.value = res.my.userinfo
        fun.value = res.my.function.slice(0, 1);
        fun1.value = res.my.function.slice(1, 7);
    }).catch(error => {
        console.error('Error fetching data:', error);
    });
});
</script>

<style>
@import url('../style/My.css');
</style>
